/* jQuery Mobile based button styles. Flattens out their color classes (A,B,C,D,E)
 * With SASS, truly separates the presentation from the content: 
 * no color classes needed in the markup.
 * Pass in the desired type of button based on the context.
 */

/* Use variables to store multiple jQM selectors. */
$btn-up-selector	: ".ui-btn-up-a, .ui-btn-up-b, .ui-btn-up-c, .ui-btn-up-d, .ui-btn-up-e";
$btn-hover-selector	: ".ui-btn-hover-a, .ui-btn-hover-b, .ui-btn-hover-c, .ui-btn-hover-d, .ui-btn-hover-e";
$btn-down-selector	: ".ui-btn-down-a, .ui-btn-down-b, .ui-btn-down-c, .ui-btn-down-d, .ui-btn-down-e";
$btn-active-selector: ".ui-btn-active";

/* Apply baseline button styling once to every kind of button. */
.up {
	.ui-btn {
		border-width: 1px;
		border-style: solid;
		font-family: Helvetica, Arial, sans-serif;
		font-weight: bold;
		text-decoration: none;
		@include text-shadow(dark);
		cursor: pointer;
	}
}

/* Specific styling for button Up state. Styling is contextual, by the type passed in. */
@mixin button-up($type) {
	
	@if $type == portal-nav {
		border-color	: $c3darker;
		background		: $c3;
		color			: $white;
		@include gradient($c3, $c3darker);
		a.ui-link-inherit {
			color		: $white;
		}
	} @else if $type == portlet-nav {
		border-color	: $c1darker;
		background		: $c1;
		color			: $white;
		@include gradient($c1, $c1darker);
		a.ui-link-inherit {
			color		: $white;
		}
	} @else if $type == utility {
		border-color	: $c3dark;
		background		: $c3;
		color			: $white;
		@include text-shadow(dark);
		@include gradient($c3light, $c3dark);
		a.ui-link-inherit {
			color		: $white;
		}
	} @else {
		border-color	: $graylight;
		background		: $graylightest;
		color			: $text;
		@include text-shadow(light);
		@include gradient($white, $graylightest);
		a.ui-link-inherit {
			color		: $graydarkest;
		}
	}
}

/* Specific styling for button Hover state. Styling is contextual, by the type passed in. */
@mixin button-hover($type) {
	
	@if $type == portal-nav {
		border-color	: $c3darker;
		background		: $c3light;
		color			: $white;
		@include gradient($c3light, $c3dark);
		a.ui-link-inherit { 
			color		: $white;
		}
	} @else if $type == portlet-nav {
		border-color	: $c3darker;
		background		: $c1light;
		color			: $white;
		@include gradient($c1lighter, $c1darker);
		a.ui-link-inherit {
			color		: $white;
		}
	} @else if $type == utility {
		border-color	: $c3dark;
		background		: $c3light;
		color			: $white;
		@include text-shadow(dark);
		@include gradient($c3lighter, $c3dark);
		a.ui-link-inherit { 
			color		: $white;
		}
	} @else {
		border-color	: $graydark;
		background		: $graylighter;
		@include text-shadow(light);
		@include gradient($graylightest, $graylighter);
		a.ui-link-inherit {
			color		: $graydarkest;
		}
	}
}

/* Specific styling for button Down state. Styling is contextual, by the type passed in. */
@mixin button-down($type) {
	
	@if $type == portal-nav {
		border-color	: $c3darker;
		background		: $c3;
		color			: $white;
		@include gradient($c3dark, $c3light);
		a.ui-link-inherit {
			color		: $white;
		}
	} @else if $type == portlet-nav {
		border-color	: $c1darker;
		background		: $c1;
		color			: $white;
		@include gradient($c1darker, $c1);
		a.ui-link-inherit {
			color		: $white;
		}
	} @else if $type == utility {
		border-color	: $c3darker;
		background		: $c3;
		color			: $white;
		@include text-shadow(dark);
		@include gradient($c3dark, $c3light);
		a.ui-link-inherit {
			color		: $white;
		}
	} @else {
		border-color	: $c1darker;
		background		: $graylighter;
		color			: $text;
		@include text-shadow(light);
		@include gradient($graylighter, $white);
		a.ui-link-inherit {
			color		: $graydarkest;
		}
	}
}

/* Specific styling for button Active (global "on") state. */
@mixin button-active() {
	border-color	: $c1darker;
	background		: $c1;
	color			: $white;
	@include text-shadow(dark);
	@include gradient($c1, $c1darker);
	a.ui-link-inherit {
		color		: $white;
	}
}

/* Button mixin. Calls in the Up, Hover, and Down states.
 * Passes the context type to those mixins.
 * If no type is specified, default will be used, which will take the @else styles. */
@mixin button($type: default) {
	#{$btn-up-selector} {
		@include button-up($type);
	}
	#{$btn-hover-selector} {
		@include button-hover($type);
	}
	#{$btn-down-selector} {
		@include button-down($type);
	}
	#{$btn-active-selector} {
		@include button-active();
	}
}